<template>
	<view class="beijingse" v-if="pageShow">
		<!-- 分享商品 -->
		<u-popup :safeAreaInsetBottom="false" :show="hbshow" @close="hbclose" mode="center">
			<view class="dingwei">
				<view class="flexright" style="margin-right: 70rpx;">
					<image class="guanbi" src="../static/image/system/gb.png" mode=""></image>
				</view>
				<view class="flexcenter">
					<view class="radius ffffff" style="width: 80%;">
						<image class="sptp" src="../static/image/system/zybjt.png" mode=""></image>
						<view class="mainpadding flexbetween">
							<view class="" style="width: 70%;">
								<view class="ershiba fonweight">洋河 海之蓝 绵柔浓香型白酒 42度 480ml*2瓶 </view>
								<view class="sanshi xiaohong">￥
									<text class="sishi xiaohong fonweight">380</text>
								</view>
								<view class="xiaohui smalltext margin_top1">已售200万件</view>
							</view>
							<view class="">
								<image class="erwwim" src="../static/image/system/zybjt.png" mode=""></image>
								<view class="xiaohui smalltext margin_top1">长按识别二维码</view>
							</view>
						</view>
					</view>
				</view>
				<view class="flexcenter margin_top">
					<view class="bcbtn flexcenter">
						<view class="margin_right2">
							<u-icon name="download" color="#FFFFFF" size="28"></u-icon>
						</view>
						<view class="xiaobai sanshier">保存到相册</view>
					</view>
				</view>
			</view>
		</u-popup>
		<!--配送说明  -->
		<u-popup :safeAreaInsetBottom="false" :show="psshow" @close="psclose" :round="10">
			<!-- 配送说明 -->
			<view class="mainpadding ffffff " style="border-radius: 20rpx 20rpx 0 0;" v-if="popvalue==1">
				<view class="sanshier textcenter fonweight">配送说明</view>
				<view class="margin_top xiaohui strongtext">{{dataAll.ps_des}}</view>
				<view class="sanshier textcenter margin_top5" @click="psclose">关闭</view>
			</view>
			<!-- 运费 -->
			<view class="mainpadding ffffff " style="border-radius: 20rpx 20rpx 0 0;" v-if="popvalue==2">
				<view class="sanshier textcenter fonweight">运费</view>
				<view class="margin_top xiaohui strongtext">{{ dataAll.freight.des}}</view>
				<view class="sanshier textcenter margin_top5" @click="psclose">关闭</view>
			</view>
			<!-- 服务说明 -->
			<view class="mainpadding ffffff " style="border-radius: 20rpx 20rpx 0 0;" v-if="popvalue==3">
				<view class="sanshier textcenter fonweight">服务说明</view>
				<view class="margin_top xiaohui strongtext">{{dataAll.ps_des}}</view>
				<view class="sanshier textcenter margin_top5" @click="psclose">关闭</view>
			</view>
			<!-- 商品说明 -->
			<view class="mainpadding ffffff " style="border-radius: 20rpx 20rpx 0 0;" v-if="popvalue==4">
				<view class="sanshier textcenter fonweight">商品说明</view>
				<view class="margin_top xiaohui strongtext">{{dataAll.goods_des}}</view>
				<view class="sanshier textcenter margin_top5" @click="psclose">关闭</view>
			</view>
		</u-popup>
		<view class="" style="padding-bottom: 150rpx;">
			<view class="dingwei">
				<u-swiper :list="dataAll.images_text" radius="0" circular height="375"></u-swiper>
				<view class="flexleft" style="position: absolute;
				top: 30rpx;right: 30rpx;">
					<!-- <view class="">
						<u-icon name="star" color="#fff" size="28"></u-icon>
					</view> -->
					<view class="" @click="httpRequest.shareFn()" >
						<u-icon name="share" color="#fff" size="28"></u-icon>
					</view>
				</view>
			</view>
			<!-- 商品信息 -->
			<view class="mainpadding">
				<!-- <view class="flexleft">
					<view class="gutp flexcenter margin_right2">
						<image class="guitp" src="../static/image/system/zybjt.png" mode=""></image>
					</view>
					<view class="smalltext xiaohei margin_right2">4款<br>可选</view>
					<image v-for="item in 3" class="guitpd margin_right2" src="../static/image/system/zybjt.png"
						mode=""></image>
				</view> -->
				<template v-if="dataAll.is_scoregoods==0">
					<view class="ershiba xiaohong fonweight ">￥
						<text class=" xiaohong fonweight" style="font-size: 48rpx;">{{dataAll.is_dls_goods==0?dataAll.goodsprice.price:dataAll.goodsprice.jh_price}}&nbsp;&nbsp;&nbsp;</text>
						<text class=" xiaohong fonweight" style="font-size: 30rpx;" v-if="dataAll.is_dls_goods==1">售价：{{dataAll.goodsprice.price}}</text>
					</view>
					<view class="xiaohei fonweight sanshier margin_top1">{{dataAll.title}}</view>
					<view class="xiaohui smalltext margin_top1">已售{{dataAll.sales}}件</view>
				</template>
				<template v-if="dataAll.is_scoregoods==1">
					<view class="mainpadding ffffff">
						<view class="xiaohei fonweight sanshier margin_top1">{{dataAll.title}}</view>
						<view class="flexbetween margin_top">
							<view class="">
								<text class="xiaolan margin_right3 fonweight" style="font-size: 42rpx;">{{dataAll.price}}积分</text>
								<text class="xiaohui strongtext">已兑换{{dataAll.sales}}件</text>
							</view>
						</view>
					</view>
				</template>
				<!-- 服务信息 -->
				<view class="radius mainpadding margin_top ffffff">
					<view class="flextop" @click="psshow = true;popvalue=1">
						<view class=" ershiba" style="color:#7A7C94 ;">配送</view>
						<view class="flexbetween xiahuaxian" style="width: 70%;">
							<view class=" ershiba xiankuan">{{dataAll.ps_des}}</view>
							<u-icon name="arrow-right" color="#CCCCCC"></u-icon>
						</view>
					</view>
					<view class="flextop margin_top" @click="psshow = true;popvalue=2">
						<view class=" ershiba" style="color:#7A7C94 ;">运费</view>
						<view class="flexbetween xiahuaxian" style="width: 70%;">
							<view class=" ershiba xiankuan">{{dataAll.freight.name}}</view>
							<u-icon name="arrow-right" color="#CCCCCC"></u-icon>
						</view>
					</view>
					<view class="flextop margin_top" @click="psshow = true;popvalue=4">
						<view class=" ershiba" style="color:#7A7C94 ;">说明</view>
						<view class="flexbetween xiahuaxian" style="width: 70%;">
							<view class=" ershiba xiankuan">{{dataAll.goods_des}}</view>
							<u-icon name="arrow-right" color="#CCCCCC"></u-icon>
						</view>
					</view>
					<view class="flextop margin_top" @click="psshow = true;popvalue=3">
						<view class=" ershiba" style="color:#7A7C94 ;">服务信息</view>
						<view class="flexbetween" style="width: 70%;">
							<view class=" ershiba xiankuan">{{dataAll.service_des}}</view>
							<u-icon name="arrow-right" color="#CCCCCC"></u-icon>
						</view>
					</view>
				</view>
				<!-- 评价 -->
				<view class="ffffff mainpadding radius margin_top" v-if="commonList.length">
					<view class="flexbetween" @click="jumper('/pages_homepage/shangppingj?id=',listid)">
						<view class="flexleft">
							<view class="line margin_right1"></view>
							<view class="sanshier fonweight xiaohei">精选点评（{{commonList.length}}）</view>
						</view>
						<u-icon name="arrow-right" color="#CCCCCC"></u-icon>
					</view>
					<view class="flextop margin_top" v-for="item in commonList" :key="item.id">
						<image class="touxiang" :src="item.user.avatar_text" mode=""></image>
						<view class="" style="width: 86%;">
							<view class="flexbetween">
								<view class="">
									<view class="ershiba">{{item.user.nickname}}</view>
									<view class="flexleft margin_top1">
										<view class="margin_right1" v-for="(ite,ind) in item.star" :key="ind">
											<u-icon name="star-fill" color="#2361FF"></u-icon>
										</view>
										<!-- <view class="smalltext xiaohui">中等满意</view> -->
									</view>
								</view>
								<view class="smalltext xiaohui">{{httpRequest.timereturn(item.createtime*1000)}}</view>
							</view>
							<view class="ershil margin_top2">{{item.content}}</view>
							<view class="flexleft flex_wrap">
								<view class="flexcenter sanshis margin_top2" v-for="(ite,ind) in item.images_text"
									:key="ind" @click="lbtpriview(ind,item.images_text)">
									<image class="pjtp" :src="ite" mode=""></image>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 商品详情 -->
				<view class="ffffff mainpadding radius margin_top">
					<view class="flexleft">
						<view class="line margin_right1"></view>
						<view class="sanshier fonweight xiaohei">商品详情</view>
					</view>
					<view class="margin_top">
						<u-parse :content="dataAll.content"></u-parse>
					</view>
				</view>
			</view>
		</view>
		<!-- 固定顶部 -->
		<view class="ffffff mainpadding radius flexbetween gudingdb" v-if="dataAll.is_scoregoods==0">
			<view class="flexleft">
				<view class="margin_right4" @click="onPhone()">
					<view class="">
						<u-icon name="kefu-ermai" color="#7A7C94" size="28"></u-icon>
					</view>
					<view class="smalltext xiaohui textcenter">客服</view>
				</view>
				<!-- 未收藏 -->
				<view class="" v-show="!dataAll.is_collect" @click="collect">
					<view class="">
						<u-icon name="star" color="#7A7C94" size="28"></u-icon>
					</view>
					<view class="smalltext xiaohui textcenter">收藏</view>
				</view>
				<!-- 已收藏 -->
				<view class="" v-show="dataAll.is_collect" @click="collect">
					<view class="">
						<u-icon name="star-fill" color="#2361ff" size="28"></u-icon>
					</view>
					<view class="smalltext xiaohui textcenter">已收藏</view>
				</view>
			</view>
			<view class="flexleft">
				<view class="xlbtn flexcenter" @click="buytype(0)">加入购物车</view>
				<view class="ljbtn flexcenter" @click="buytype(1)">立即购买</view>
			</view>
		</view>
		<view class="ffffff mainpadding radius gudingdb"  v-if="dataAll.is_scoregoods==1">
			<view class="bigbtn"  @click="buytype(1)">立即兑换</view>
		</view>
		<u-popup :safeAreaInsetBottom="false" :show="ggshow" mode="bottom" :round="10" @close="closed">
			<view class="mainpadding ffffff" style="border-radius: 20rpx 20rpx 0 0;">
				<view class="flexleft">
					<view class="guigslt margin_right2">
						<image :src="dataAll.image_text" mode=""></image>
					</view>
					<view class="">
						<view class="dahtext margin_right" v-if="price!='' && dataAll.is_scoregoods==0 && dataAll.is_dls_goods==0">¥{{price}}</view>
						<view class="dahtext margin_right" v-if="jh_price!='' && dataAll.is_scoregoods==0 && dataAll.is_dls_goods==1">
							<text>¥{{jh_price}}</text>
							<text class="strongtext">售价：{{price}}</text>
						</view>
						<view class="dahtext margin_right" v-if="price!='' && dataAll.is_scoregoods==1">{{price}}积分</view>
						<view class="margin_top nostrongtext" v-if="stock!=''">库存：{{stock}}</view>
					</view>
				</view>
				<view class="padding_top">
					<template v-if="dataAll.spu.length">
						<view class="" v-for="item in dataAll.spu" :key="item.id">
							<view class="titletext margin_top">{{item.name}}</view>
							<view class="flexleft flex_wrap">
								<view
									:class="item.selecttext==ite?'margin_top margin_right2 huangg':'margin_top margin_right2 huigg'"
									v-for="(ite) in item.item" :key="ite" @click="checkgg(item,ite)">{{ite}}</view>
							</view>
						</view>
					</template>
					<view class="flexbetween margin_top">
						<view class="titletext ">购买数量</view>
						<u-number-box button-size="36" color="#000000" bgColor="#F7F7F7" iconStyle="color: #fff"
							v-model="buynumber"></u-number-box>
					</view>
				</view>
				<view class="bigbtn margin_top6" @click="ggclose">{{buy_type==0?"加入购物车":"立即购买"}}</view>
			</view>
		</u-popup>
		<yk-authpup ref="authpup" type="top" @changeAuth="changeAuth" :permissionID="permissionID"></yk-authpup>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				httpRequest,
				hbshow: false, //海报
				psshow: false, //配送
				dataAll: {},
				pageShow: false,
				buynumber: 1,
				ggshow: false,
				price: "", //规格弹框价格
				jh_price:"",
				stock: "", //库存
				sku_id: "",
				guigeflag: false, //是否选择规格
				buy_type: 0,
				commonList: [],
				popvalue: 1,
				goods_tel: "",
				permissionID: '',
				callphonenum: ""
				
			}
		},
		onLoad(options) {
			this.listid = options.id
			this.getDetail()
			// this.getsystemfn()
			this.getPj()
		},
		watch: {
			'dataAll.spu': {
				handler(newval) {
					let arr = []
					newval.forEach(item => {
						arr.push(item.selecttext)
					})
					// 规格换算价格
					let text = arr.join()
					this.dataAll.sku.forEach(item => {
						// 如果后台返回规格与前端规格一致，赋值换算
						if (item.difference == text) {
							this.price = item.price //价格赋值
							this.jh_price = item.jh_price
							this.stock = item.stock //库存
							this.sku_id = item.id
						}
					})
					// 计算是否选择规格
					let num = 0
					arr.forEach(item => {
						if (item != "") {
							num = num + 1
						}
					})
					if (num != arr.length) {
						this.guigeflag = false
					} else {
						this.guigeflag = true
					}
				},
				deep: true
			}
		},
		methods: {
			//打开自定义权限目的弹框
			onPhone() {
				let system = uni.getSystemInfoSync()
				let version_code = system.appVersionCode
				let platform = system.platform
				console.log(platform,this.dataAll.goods_tel,this.goods_tel,"》》》》》》》》》》》》》》》》》");
				if(uni.getSystemInfoSync().brand.toLowerCase() != 'huawei'){
					this.callphone(this.dataAll.goods_tel)
					return false
				}
				this.permissionID =
				'CALL_PHONE'; //这个是对应的权限 ACCESS_FINE_LOCATION 位置权限 / WRITE_EXTERNAL_STORAGE 存储空间/照片权限 / CAMERA相机权限 / CALL_PHONE 拨打电话
				setTimeout(() => {
					this.$refs['authpup'].open();
				}, 500)
			},
			//用户授权权限后的回调
			changeAuth() {
				this.callphone(this.dataAll.goods_tel)
			},
			getPj() {
				httpRequest.request('/api/goods/goodsComment', 'GET', {
					page: 1,
					limit: 1,
					status: 0,
					goods_id: this.listid,
				}, false, false, true).then(res => {
					this.commonList = res.data.data
				})
			},
			ggclose() {
				if (this.dataAll.status == "hidden") {
					httpRequest.toast("当前商品已下架，暂时无法购买")
					return
				}
				if (!this.guigeflag) {
					httpRequest.toast("请先选择规格")
					return
				}
				this.ggshow = false
				if (this.buy_type == 0) {
					this.addcar()
				} else {
					let data = {
						type: "detail", //detail=商品详情,cart=购物车
						order_type:this.dataAll.is_scoregoods==0?1:2,
						data: [{
							goods_id: this.listid,
							number: this.buynumber,
							sku_id: this.dataAll.specs == "single" ? this.dataAll.goodsprice.id : this.sku_id
						}]
					}
					uni.navigateTo({
						url: '/pages_homepage/querendd?msg=' + encodeURIComponent(JSON.stringify(data))
					})
				}
			},
			// 收藏
			collect() {
				httpRequest.request('/api/goods/addGoodsCollect', 'GET', {
					goods_id: this.listid,
				}, false, false, true).then(res => {
					httpRequest.toast(res.msg)
					if (res.code == 1) {
						this.dataAll.is_collect = !this.dataAll.is_collect
					}
				})
			},
			addcar() {
				httpRequest.request('/api/cart/addCart', 'POST', {
					goods_id: this.dataAll.id,
					number: this.buynumber,
					sku_id: this.sku_id
				}).then(res => {
					httpRequest.toast(res.msg)
				})
			},
			buytype(value) {
				if (!httpRequest.checkIsLogin()) {
					uni.navigateTo({
						url: "/pages/login/login"
					})
					return false
				}
				this.buy_type = value
				this.ggshow = true
			},
			// 规格选择
			checkgg(item, ite) {
				item.selecttext = ite
			},
			closed() {
				this.ggshow = false
			},
			getDetail() { //获取商品分类
				httpRequest.request('/api/goods/goodsDetail', 'GET', {
					goods_id: this.listid
				}).then(res => {
					res.data.spu.forEach(current => {
						current.item = current.item.split(",")
						this.$set(current, "selecttext", "")
					})
					this.dataAll = res.data
					this.pageShow = true
				}).catch(err => {})
			},
			getsystemfn() { //获取商品分类
			console.log("?????????????????",121212111111111111111111);
				httpRequest.request('/api/index/getConfigInfo', 'GET', {}).then(res => {
					console.log("?????????????????",res.data);
					this.goods_tel = res.data.goods_tel
				}).catch(err => {})
			},
			jumper(url, id) {
				uni.navigateTo({
					url: url + id
				})
			},
			// 配送
			psclose() {
				this.psshow = false
			},
			// 海报
			hbclose() {
				this.hbshow = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.guigslt {
		width: 134rpx;
		height: 134rpx;
		border-radius: 8rpx;

		image {
			width: 100%;
			height: 100%;
			border-radius: 8rpx;
		}
	}

	.dahtext {
		font-size: 36rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #FD463E;
	}

	.huangg {
		// width: 147rpx;
		padding: 10rpx 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #228DFF;
		background: rgba(34, 141, 255, .1);
		border-radius: 27rpx;
	}

	.huigg {
		padding: 10rpx 30rpx;
		// width: 147rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
		background: #F5F5F5;
		border-radius: 27rpx;
	}

	/deep/.u-number-box__minus {
		background-color: #FDE7E7 !important;
	}

	/deep/.u-number-box__plus {
		background-color: #FFDECB !important;
	}

	/deep/.uicon-minus {
		color: #000000 !important;
	}

	/deep/.uicon-plus {
		color: #000000 !important;
	}

	.pjtp {
		width: 160rpx;
		height: 160rpx;
		background: #FBFCFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.bcbtn {
		width: 330rpx;
		height: 80rpx;
		background: #2361FF;
		border-radius: 184rpx 184rpx 184rpx 184rpx;
	}

	.guanbi {
		width: 50rpx;
		height: 101.66rpx;
	}

	.erwwim {
		width: 140rpx;
		height: 140rpx;
	}

	.sptp {
		width: 600rpx;
		height: 600rpx;
		border-radius: 20rpx 20rpx 0 0;
	}

	/deep/.u-popup__content {
		background-color: rgba(0, 0, 0, .01) !important;
	}

	.ljbtn {
		width: 216rpx;
		height: 80rpx;
		background: #2361FF;
		border-radius: 0rpx 245rpx 245rpx 0rpx;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
	}

	.xlbtn {
		width: 216rpx;
		height: 80rpx;
		background: rgba(35, 97, 255, 0.1);
		border-radius: 44rpx 0rpx 0rpx 44rpx;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #2361FF;
	}

	.line {
		width: 8rpx;
		height: 30rpx;
		background: linear-gradient(180deg, #2361FF 0%, #FFFFFF 100%);
	}

	.touxiang {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}

	.guitpd {
		width: 80rpx;
		height: 80rpx;
		border-radius: 5rpx;
	}

	.guitp {
		width: 68rpx;
		height: 68rpx;
		border-radius: 5rpx;
	}

	.gutp {
		background: #FFFFFF;
		border-radius: 15rpx 15rpx 15rpx 15rpx;
		padding: 8rpx;
		border: 1rpx solid #2361FF;
	}
</style>